import './index.css'
import {classname} from "../../tools/props";
import {lower} from "../../tools/lower";
//按钮尺寸
const Size = props =>  props=== 'smail'? {
    height:'28px',lineHeight:'28px',padding:'0 10px'
}: props==='default'?{
    height: '32px',lineHeight: '32px',padding: '0 15px'
}: props==='large'?{
    height: '36px',lineHeight: '36px',padding: '0 20px'
}: props==Number(props)?{
    height: props+'px',lineHeight: props+'px'
}: {height: '20px',lineHeight: '20px'};
//按钮禁用
const Span = prop => prop?(<span></span>):''


const Button = props => {
    const Name = classname(props.className);
    const size = Size(props.size)
    const long = props.long? 'fox-button-long':''
    const block = !props.block?'':
          props.block==='inline'?'inline':
          props.block==='inline-block'?'inline-block':'block'
    const radius = {borderRadius:Number(props.radius)+'%'}
    if (props.type !== undefined){
        const type = lower(props.type)
        //状态按钮  状态只有三个
        switch (type) {
            //警告
            case 'warn':
                return (
                    <div className={`fox-button-div ${long}`} style={{display:block}}>
                        <button
                            className={`fox-button fox-button-warn ${Name}`}
                            style={{
                                ...size,...radius
                            }}
                            onClick={props.click}
                            type={props.htmlType}
                            disabled={props.disabled}
                        >
                            {props.children}
                            {Span(props.disabled)}
                        </button>
                    </div>
                )
            case 'danger':
                // 失败
                return (
                    <div className={`fox-button-div ${long}`} style={{display:block}}>
                        <button
                            className={`fox-button fox-button-danger ${Name}`}
                            style={size}
                            onClick={props.click}
                            type={props.htmlType}
                            disabled={props.disabled}
                        >
                            {props.children}
                            {Span(props.disabled)}
                        </button>
                    </div>
                )
            case 'success':
                //成功
                return (
                    <div className={`fox-button-div ${long}`} style={{display:block}}>
                        <button
                            className={`fox-button fox-button-success ${Name}`}
                            style={size}
                            onClick={props.click}
                            type={props.htmlType}
                            disabled={props.disabled}
                        >
                            {props.children}
                            {Span(props.disabled)}
                        </button>
                    </div>
                )
            default :
                return new Error('没有其他的状态按钮了')
        }
    }else {
        //默认样式 没有状态
        return (
            <div className={`fox-button-div ${long}`} style={{display:block}}>
                <button
                    className={`fox-button fox-button-default ${Name}`}
                    style={size}
                    type={props.htmlType}
                    disabled={props.disabled}
                    onClick={props.click}
                >
                    {props.children}
                    {Span(props.disabled)}
                </button>
            </div>
        )
    }
}
export { Button }
